<template>
  <view class="tui-container" @touchmove.stop.prevent="stop">
    <view
      class="tui-image-cropper"
      :change:prop="parse.propsChange"
      :prop="props"
      :data-lockRatio="lockRatio"
      :data-lockWidth="lockWidth"
      :data-lockHeight="lockHeight"
      :data-maxWidth="maxWidth"
      :data-minWidth="minWidth"
      :data-maxHeight="maxHeight"
      :data-minHeight="minHeight"
      :data-width="width"
      :data-height="height"
      :data-limitMove="limitMove"
      :data-windowHeight="sysInfo.windowHeight || 600"
      :data-windowWidth="sysInfo.windowWidth || 400"
      :data-imgTop="imgTop"
      :data-imgLeft="imgLeft"
      :data-imgWidth="imgWidth"
      :data-imgHeight="imgHeight"
      :data-angle="angle"
      @touchend="parse.cutTouchEnd"
      @touchstart="parse.cutTouchStart"
      @touchmove="parse.cutTouchMove"
    >
      <view class="tui-content">
        <view
          class="tui-content-top tui-bg-transparent"
          :style="{ transitionProperty: cutAnimation ? '' : 'background' }"
        ></view>
        <view class="tui-content-middle">
          <view
            class="tui-bg-transparent tui-wxs-bg"
            :style="{ transitionProperty: cutAnimation ? '' : 'background' }"
          ></view>
          <view
            class="tui-cropper-box"
            :style="{
              borderColor: borderColor,
              transitionProperty: cutAnimation ? '' : 'background'
            }"
          >
            <view
              v-for="(item, index) in 4"
              :key="index"
              class="tui-edge"
              :class="[
                `tui-${index < 2 ? 'top' : 'bottom'}-${
                  index === 0 || index === 2 ? 'left' : 'right'
                }`
              ]"
              :style="{
                width: edgeWidth,
                height: edgeWidth,
                borderColor: edgeColor,
                borderWidth: edgeBorderWidth,
                left: index === 0 || index === 2 ? `-${edgeOffsets}` : 'auto',
                right: index === 1 || index === 3 ? `-${edgeOffsets}` : 'auto',
                top: index < 2 ? `-${edgeOffsets}` : 'auto',
                bottom: index > 1 ? `-${edgeOffsets}` : 'auto'
              }"
            ></view>
          </view>
          <view
            class="tui-flex-auto tui-bg-transparent"
            :style="{ transitionProperty: cutAnimation ? '' : 'background' }"
          ></view>
        </view>
        <view
          class="tui-flex-auto tui-bg-transparent"
          :style="{ transitionProperty: cutAnimation ? '' : 'background' }"
        ></view>
      </view>
      <image
        @load="imageLoad"
        @error="imageLoad"
        @touchstart="parse.touchstart"
        @touchmove="parse.touchmove"
        @touchend="parse.touchend"
        :data-minScale="minScale"
        :data-maxScale="maxScale"
        :data-disableRotate="disableRotate"
        :style="{
          width: imgWidth ? imgWidth + 'px' : 'auto',
          height: imgHeight ? imgHeight + 'px' : 'auto',
          transitionDuration: (cutAnimation ? 0.3 : 0) + 's'
        }"
        class="tui-cropper-image"
        :class="{ 'tui-cropper__image-hidden': !picturePath }"
        :src="picturePath"
        mode="widthFix"
      ></image>
    </view>
    <view class="tui-cropper-tabbar" v-if="!custom">
      <view class="tui-op-btn" @tap.stop="back">取消</view>
      <image :src="rotateImg" class="tui-rotate-img" @tap="setAngle"></image>
      <view class="tui-op-btn" @tap.stop="getImage">完成</view>
    </view>
  </view>
</template>
<script src="./tui-cropper-app.wxs" module="parse" lang="wxs"></script>
<script>
/**
 * 注意：组件中使用的图片地址，将文件复制到自己项目中
 * 如果图片位置与组件同级，编译成小程序时图片会丢失
 * 拷贝static下整个components文件夹
 *也可直接转成base64（不建议）
 *
 * */
export default {
  name: 'tuiCropperApp',
  emits: ['ready', 'cropper', 'imageLoad', 'initAngle'],
  props: {
    //图片路径
    imageUrl: {
      type: String,
      default: ''
    },
    /*
				 默认正方形，可修改大小控制比例
				 裁剪框高度 px
				*/
    height: {
      type: Number,
      default: 280
    },
    //裁剪框宽度 px
    width: {
      type: Number,
      default: 280
    },
    //裁剪框最小宽度 px
    minWidth: {
      type: Number,
      default: 100
    },
    //裁剪框最小高度 px
    minHeight: {
      type: Number,
      default: 100
    },
    //裁剪框最大宽度 px
    maxWidth: {
      type: Number,
      default: 360
    },
    //裁剪框最大高度 px
    maxHeight: {
      type: Number,
      default: 360
    },
    //裁剪框border颜色
    borderColor: {
      type: String,
      default: 'rgba(255,255,255,0.1)'
    },
    //裁剪框边缘线颜色
    edgeColor: {
      type: String,
      default: '#FFFFFF'
    },
    //裁剪框边缘线宽度 w=h
    edgeWidth: {
      type: String,
      default: '34rpx'
    },
    //裁剪框边缘线border宽度
    edgeBorderWidth: {
      type: String,
      default: '6rpx'
    },
    //偏移距离，根据edgeBorderWidth进行调整
    edgeOffsets: {
      type: String,
      default: '6rpx'
    },
    /**
     * 如果宽度和高度都为true则裁剪框禁止拖动
     * 裁剪框宽度锁定
     */
    lockWidth: {
      type: Boolean,
      default: false
    },
    //裁剪框高度锁定
    lockHeight: {
      type: Boolean,
      default: false
    },
    //锁定裁剪框比例（放大或缩小）
    lockRatio: {
      type: Boolean,
      default: false
    },
    //生成的图片尺寸相对剪裁框的比例
    scaleRatio: {
      type: Number,
      default: 2
    },
    //图片的质量，取值范围为 (0, 1]，不在范围内时当作1.0处理
    quality: {
      type: Number,
      default: 0.8
    },
    //图片旋转角度[当前版本只能传90的倍数，否则可能导致裁剪失败或不正确]
    rotateAngle: {
      type: Number,
      default: 0
    },
    //图片最小缩放比
    minScale: {
      type: Number,
      default: 0.5
    },
    //图片最大缩放比
    maxScale: {
      type: Number,
      default: 2
    },
    //是否禁用触摸旋转（为false则可以触摸转动图片，limitMove为false生效）
    //此属性App端当前版本不可用，否则可能导致裁剪失败或不正确
    disableRotate: {
      type: Boolean,
      default: true
    },
    //是否限制移动范围(剪裁框只能在图片内,为true不可触摸转动图片)
    //注意:此属性当前版本不可传false，由于api不支持超出裁剪区域裁剪，所以只能限制在裁剪框内
    limitMove: {
      type: Boolean,
      default: true
    },
    //自定义操作栏（为true时隐藏底部操作栏）
    custom: {
      type: Boolean,
      default: false
    },
    //值发生改变开始裁剪（custom为true时生效）
    startCutting: {
      type: [Number, Boolean],
      default: 0
    },
    /**
     * 是否返回base64(H5端默认base64)
     * 支持平台：App，微信小程序，支付宝小程序,H5(默认url就是base64)
     **/
    isBase64: {
      type: Boolean,
      default: false
    },
    //裁剪时是否显示loadding
    loadding: {
      type: Boolean,
      default: true
    },
    //旋转icon
    rotateImg: {
      type: String,
      default: '/static/components/cropper/img_rotate.png'
    }
  },
  data() {
    return {
      TIME_CUT_CENTER: null,
      cutX: 0, //画布x轴起点
      cutY: 0, //画布y轴起点0
      canvasWidth: 0,
      canvasHeight: 0,
      naturalWidth: 0,
      naturalHeight: 0,
      imgWidth: 0, //图片宽度
      imgHeight: 0, //图片高度
      scale: 1, //图片缩放比
      angle: 0, //图片旋转角度
      cutAnimation: false, //是否开启图片和裁剪框过渡
      cutAnimationTime: null,
      imgTop: 0, //图片上边距
      imgLeft: 0, //图片左边距
      sysInfo: {},
      props: '',
      sizeChange: 0, //2
      angleChange: 0, //3
      resetChange: 0, //4
      centerChange: 0, //5
      orientation: '',
      picturePath: ''
    }
  },
  watch: {
    //定义变量然后利用change触发
    imageUrl(val, oldVal) {
      this.imageReset()
      this.showLoading()
      uni.getImageInfo({
        src: val,
        success: (res) => {
          //计算图片尺寸
          this.naturalWidth = res.width
          this.naturalHeight = res.height
          this.orientation = res.orientation
          if (this.orientation != 'up') {
            //宽高传值颠倒
            let width = this.orientation == 'down' ? res.width : res.height
            let height = this.orientation == 'down' ? res.height : res.width
            this.compressImage(val, width, height)
          } else {
            this.picturePath = val
            this.imgComputeSize(res.width, res.height)
            if (this.limitMove) {
              this.angleChange++
              this.props = `3,${this.angleChange}`
            }
          }
        },
        fail: (err) => {
          this.imgComputeSize()
          if (this.limitMove) {
            this.angleChange++
            this.props = `3,${this.angleChange}`
          }
        }
      })
    },
    rotateAngle(val) {
      this.cutAnimation = true
      this.angle = val
      this.angleChanged(val)
    },
    cutAnimation(val) {
      //开启过渡260毫秒之后自动关闭
      clearTimeout(this.cutAnimationTime)
      if (val) {
        this.cutAnimationTime = setTimeout(() => {
          this.cutAnimation = false
        }, 260)
      }
    },
    limitMove(val) {
      if (val) {
        this.angleChanged(this.angle)
      }
    },
    startCutting(val) {
      if (this.custom && val) {
        this.getImage()
      }
    }
  },
  created() {
    this.picturePath = this.imageUrl
  },
  mounted() {
    this.sysInfo = uni.getSystemInfoSync()
    this.imgTop = this.sysInfo.windowHeight / 2
    this.imgLeft = this.sysInfo.windowWidth / 2
    this.canvasHeight = this.height
    this.canvasWidth = this.width
    //初始化
    setTimeout(() => {
      this.props = '1,1'
    }, 0)
    setTimeout(() => {
      this.$emit('ready', {})
    }, 200)
  },
  methods: {
    toast(title) {
      uni.showToast({
        title: title || '出错啦~',
        icon: 'none'
      })
    },
    async compressImage(url, width, height) {
      let imgUrl = url
      if (~imgUrl.indexOf('https:')) {
        imgUrl = await this.getLocalImage(url)
        if (!imgUrl) {
          this.toast('网络图片处理失败~')
          return
        }
      }
      let defaultAngle =
        {
          up: 0,
          down: 180,
          left: 270,
          right: 90
        }[this.orientation] || 0
      let f_dst = `_documents/${this.unique()}.jpg`
      plus.zip.compressImage(
        {
          src: imgUrl,
          dst: f_dst,
          overwrite: true,
          rotate: defaultAngle,
          format: 'jpg'
        },
        (i) => {
          this.picturePath = i.target
          this.imgComputeSize(width, height)
          if (this.limitMove) {
            this.angleChange++
            this.props = `3,${this.angleChange}`
          }
        },
        (e) => {
          this.picturePath = imgUrl
          this.imgComputeSize(width, height)
          if (this.limitMove) {
            this.angleChange++
            this.props = `3,${this.angleChange}`
          }
        }
      )
    },
    //网络图片转成本地文件[同步执行]
    async getLocalImage(url) {
      return await new Promise((resolve, reject) => {
        uni.downloadFile({
          url: url,
          success: (res) => {
            resolve(res.tempFilePath)
          },
          fail: (res) => {
            reject(false)
          }
        })
      })
    },
    //返回裁剪后图片信息
    getImage() {
      if (!this.picturePath) {
        this.toast('请选择图片')
        return
      }
      this.loadding && this.showLoading()
      let cutting = async () => {
        //图片实际大小
        let imgUrl = this.picturePath
        if (~this.picturePath.indexOf('https:')) {
          imgUrl = await this.getLocalImage(this.picturePath)
          if (!imgUrl) {
            this.toast('网络图片处理失败~')
            return
          }
        }
        let data = {
          url: '',
          base64: ''
        }
        let f_dst = `_documents/${this.unique()}.jpg`
        let multiple = Math.round(this.angle / 90)
        let angle = 0,
          x = 0,
          y = 0,
          left = 0,
          top = 0,
          clipHeight = 0,
          clipWidth = 0

        let isAndroid = this.sysInfo.platform.toLocaleLowerCase() == 'android'

        if (multiple % 2 == 0) {
          angle = this.angle % 360 == 0 || this.angle == 0 ? 0 : 180
          if (!isAndroid || (isAndroid && angle == 0)) {
            x = this.imgLeft - (this.imgWidth * this.scale) / 2
            y = this.imgTop - (this.imgHeight * this.scale) / 2
            left = (
              ((this.cutX - x) / this.imgWidth / this.scale) *
              100
            ).toFixed(2)
            top = (
              ((this.cutY - y) / this.imgHeight / this.scale) *
              100
            ).toFixed(2)
            clipWidth = (
              (this.canvasWidth / this.imgWidth / this.scale) *
              100
            ).toFixed(2)
            clipHeight = (
              (this.canvasHeight / this.imgHeight / this.scale) *
              100
            ).toFixed(2)
          } else {
            x = this.imgLeft - (this.imgWidth * this.scale) / 2
            y = this.imgTop - (this.imgHeight * this.scale) / 2
            left = (
              ((this.imgWidth * this.scale -
                (this.cutX - x) -
                this.canvasWidth) /
                this.imgWidth /
                this.scale) *
              100
            ).toFixed(2)
            top = (
              ((this.imgHeight * this.scale -
                (this.cutY - y) -
                this.canvasHeight) /
                this.imgHeight /
                this.scale) *
              100
            ).toFixed(2)
            clipWidth = (
              (this.canvasWidth / this.imgWidth / this.scale) *
              100
            ).toFixed(2)
            clipHeight = (
              (this.canvasHeight / this.imgHeight / this.scale) *
              100
            ).toFixed(2)
          }
        } else {
          angle = this.angle % 270 == 0 ? 270 : 90
          if (isAndroid) {
            if (angle == 90) {
              x = this.imgLeft - (this.imgHeight * this.scale) / 2
              y = this.imgTop - (this.imgWidth * this.scale) / 2
              top = (
                ((this.imgHeight * this.scale -
                  (this.cutX - x) -
                  this.canvasHeight) /
                  this.imgHeight /
                  this.scale) *
                100
              ).toFixed(2)
              left = (
                ((this.imgWidth * this.scale -
                  (this.cutY - y) -
                  this.canvasWidth) /
                  this.imgWidth /
                  this.scale) *
                100
              ).toFixed(2)
              clipHeight = (
                (this.canvasWidth / this.imgHeight / this.scale) *
                100
              ).toFixed(2)
              clipWidth = (
                (this.canvasHeight / this.imgWidth / this.scale) *
                100
              ).toFixed(2)
            } else {
              x = this.imgLeft - (this.imgHeight * this.scale) / 2
              y = this.imgTop - (this.imgWidth * this.scale) / 2
              top = (
                ((this.cutX - x) / this.imgHeight / this.scale) *
                100
              ).toFixed(2)
              left = (
                ((this.cutY - y) / this.imgWidth / this.scale) *
                100
              ).toFixed(2)
              clipHeight = (
                (this.canvasWidth / this.imgHeight / this.scale) *
                100
              ).toFixed(2)
              clipWidth = (
                (this.canvasHeight / this.imgWidth / this.scale) *
                100
              ).toFixed(2)
            }
          } else {
            x = this.imgLeft - (this.imgHeight * this.scale) / 2
            y = this.imgTop - (this.imgWidth * this.scale) / 2
            left = (
              ((this.cutX - x) / this.imgHeight / this.scale) *
              100
            ).toFixed(2)
            top = (
              ((this.cutY - y) / this.imgWidth / this.scale) *
              100
            ).toFixed(2)
            clipWidth = (
              (this.canvasWidth / this.imgHeight / this.scale) *
              100
            ).toFixed(2)
            clipHeight = (
              (this.canvasHeight / this.imgWidth / this.scale) *
              100
            ).toFixed(2)
          }
        }
        let width =
          (this.imgWidth < this.naturalWidth
            ? this.naturalWidth
            : this.imgWidth) * this.scale
        let height =
          (this.imgHeight < this.naturalHeight
            ? this.naturalHeight
            : this.imgHeight) * this.scale
        // if (isAndroid && width > 800) {
        // 	width = '800px';
        // 	height = 'auto'
        // } else {
        // 	width = `${width}px`;
        // 	height = `${height}px`
        // }
        width = `${width}px`
        height = `${height}px`
        left = Number(left) <= 0 ? 0 : left
        top = Number(top) <= 0 ? 0 : top
        plus.zip.compressImage(
          {
            src: imgUrl,
            dst: f_dst,
            quality: this.quality * 100,
            overwrite: true,
            format: 'jpg',
            width: width,
            height: height,
            rotate: angle,
            clip: {
              top: `${top}%`,
              left: `${left}%`,
              width: `${clipWidth}%`,
              height: `${clipHeight}%`
            }
          },
          (i) => {
            this.loadding && uni.hideLoading()
            data.url = i.target
            if (this.isBase64) {
              plus.io.resolveLocalFileSystemURL(f_dst, (entry) => {
                entry.file(
                  (file) => {
                    let reader = new plus.io.FileReader()
                    reader.onloadend = (e) => {
                      data.base64 = e.target.result
                      this.$emit('cropper', data)
                    }
                    reader.readAsDataURL(file)
                  },
                  (e) => {
                    //转换base64失败，传回图片url
                    this.$emit('cropper', data)
                  }
                )
              })
            } else {
              this.$emit('cropper', data)
            }
          },
          (e) => {
            console.log(e)
            this.toast('图片裁剪失败,请稍候再试~')
            //原图输出
            // data.url = imgUrl;
            // this.$emit('cropper', data);
          }
        )
      }
      setTimeout(() => {
        cutting()
      }, 20)
    },
    unique(n = 6) {
      let rnd = ''
      for (let i = 0; i < n; i++) rnd += Math.floor(Math.random() * 10)
      return 'thorui_' + new Date().getTime() + rnd
    },
    change(e) {
      this.cutX = e.cutX || 0
      this.cutY = e.cutY || 0
      this.canvasWidth = e.canvasWidth || this.width
      this.canvasHeight = e.canvasHeight || this.height
      this.imgWidth = e.imgWidth || this.imgWidth
      this.imgHeight = e.imgHeight || this.imgHeight
      this.scale = e.scale || 1
      this.angle = e.angle || 0
      this.imgTop = e.imgTop || 0
      this.imgLeft = e.imgLeft || 0
    },
    imageReset() {
      this.scale = 1
      this.angle = 0
      let sys = this.sysInfo.windowHeight
        ? this.sysInfo
        : uni.getSystemInfoSync()
      this.imgTop = sys.windowHeight / 2
      this.imgLeft = sys.windowWidth / 2
      this.resetChange++
      this.props = `4,${this.resetChange}`
      //初始化旋转角度 0deg
      this.$emit('initAngle', {})
    },
    imageLoad(e) {
      this.imageReset()
      uni.hideLoading()
      this.$emit('imageLoad', {})
    },

    imgComputeSize(width, height) {
      //默认按图片最小边 = 对应裁剪框尺寸
      let imgWidth = width,
        imgHeight = height
      if (imgWidth && imgHeight) {
        if (imgWidth / imgHeight > this.width / this.height) {
          imgHeight = this.height
          imgWidth = (width / height) * imgHeight
        } else {
          imgWidth = this.width
          imgHeight = (height / width) * imgWidth
        }
      } else {
        let sys = this.sysInfo || uni.getSystemInfoSync()
        imgWidth = sys.windowWidth
        imgHeight = 0
      }
      this.imgWidth = imgWidth
      this.imgHeight = imgHeight
      this.sizeChange++
      this.props = `2,${this.sizeChange}`
    },
    moveStop() {
      clearTimeout(this.TIME_CUT_CENTER)
      this.TIME_CUT_CENTER = setTimeout(() => {
        if (!this.cutAnimation) {
          this.cutAnimation = true
        }
        this.centerChange++
        this.props = `5,${this.centerChange}`
      }, 666)
    },
    moveDuring() {
      clearTimeout(this.TIME_CUT_CENTER)
    },
    showLoading() {
      uni.showLoading({
        title: '请稍候...',
        mask: true
      })
    },
    stop() {},
    back() {
      uni.navigateBack()
    },
    angleChanged(val) {
      this.moveStop()
      if (this.limitMove && val % 90) {
        this.angle = Math.round(val / 90) * 90
      }
      this.angleChange++
      this.props = `3,${this.angleChange}`
    },
    setAngle() {
      this.cutAnimation = true
      this.angle = this.angle + 90
      this.angleChanged(this.angle)
    }
  }
}
</script>

<style scoped>
.tui-container {
  width: 100vw;
  height: 100vh;
  padding: 0;
  background-color: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

.tui-image-cropper {
  width: 100vw;
  height: 100vh;
  position: absolute;
}

.tui-cropper__image-hidden {
  visibility: hidden;
  opacity: 0;
}

.tui-content {
  width: 100vw;
  height: 100vh;
  padding: 0;
  position: absolute;
  z-index: 9;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.tui-bg-transparent {
  background-color: rgba(0, 0, 0, 0.6);
  transition-duration: 0.3s;
}

.tui-content-top {
  pointer-events: none;
}

.tui-content-middle {
  width: 100%;
  height: 200px;
  display: flex;
  box-sizing: border-box;
}

.tui-cropper-box {
  position: relative;
  /* transition-duration: 0.2s; */
  border-style: solid;
  border-width: 1rpx;
  box-sizing: border-box;
}

.tui-flex-auto {
  flex: auto;
}

.tui-cropper-image {
  width: 100%;
  border-style: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-origin: center;
}

.tui-edge {
  border-style: solid;
  pointer-events: auto;
  position: absolute;
  box-sizing: border-box;
}

.tui-top-left {
  border-bottom-width: 0 !important;
  border-right-width: 0 !important;
}

.tui-top-right {
  border-bottom-width: 0 !important;
  border-left-width: 0 !important;
}

.tui-bottom-left {
  border-top-width: 0 !important;
  border-right-width: 0 !important;
}

.tui-bottom-right {
  border-top-width: 0 !important;
  border-left-width: 0 !important;
}

.tui-cropper-tabbar {
  width: 100%;
  height: 120rpx;
  padding: 0 40rpx;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ffffff;
  font-size: 32rpx;
}

.tui-cropper-tabbar::after {
  content: ' ';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  border-top: 1rpx solid rgba(255, 255, 255, 0.2);
  -webkit-transform: scaleY(0.5) translateZ(0);
  transform: scaleY(0.5) translateZ(0);
  transform-origin: 0 100%;
}

.tui-op-btn {
  height: 80rpx;
  display: flex;
  align-items: center;
}

.tui-rotate-img {
  width: 44rpx;
  height: 44rpx;
}
</style>
